<template>
  <div className="home">
    <van-nav-bar
        title='物流详情'
        placeholder
        fixed
        left-arrow
        @click-left="goBack"
    />
    <!--创建地图容器-->
    <div id="container" className="allmap" style="  width: 100%;
  height: 50vh;
  position: relative;;
left: 0px"></div>
    <div>
      <van-form>
        <van-cell title="商品名称" :value="book_name"></van-cell>
        <van-cell title="发货地址" :value="send_address.addressDetail"></van-cell>
        <van-cell title="收货地址" :value="get_address.addressDetail"></van-cell>
      </van-form>
    </div>
    <buttom/>
  </div>
</template>

<script>
import {BMPGL} from "@/bmpgl.js"
import axios from "axios";
import buttom from "@/components/book/buttom";

export default {
  name: "home",
  components:{
    buttom
  },
  data() {
    return {
      getAddress:'',
      getAddressId:localStorage.getItem("GetAddressId"),
      postAddress:localStorage.getItem("postAddress"),
      BookName:localStorage.getItem("BookName"),
      send_address:{
        province:'四川省',
        city:'成都市',
        county:'双流区',
        addressDetail:'四川大学',
      },
      get_address:{
        province:'四川省',
        city:'成都市',
        county:'双流区',
        addressDetail:'西南民族大学',
      },
      book_name:'父愁者联盟',
      send_point_lng:'',
      send_point_lat:'',
      get_point_lng:'',
      get_point_lat:'',
      result_point:'',
      ak: "tHkH3u6vI4GHPdjgSFboK7xHaVPUqLOk", // 百度的地图密钥
      myMap: null,
      arrayList:[],
    };
  },
  created() {
    var _this = this
    _this.axios({
      method:'get',
      url:'/address_edit/addressById/'+_this.getAddressId,
    }).then(function (rep){
      _this.get_address.addressDetail = rep.data.addressDetail
    })


    //初始化地图，并把发货地址和收货地址的经纬度取出来
    BMPGL(_this.ak).then((BMapGL) => {
      // 创建地图实例
      var map = new BMapGL.Map("container");
      // 创建点坐标 axios => res 获取的初始化定位坐标
      let point = new BMapGL.Point(116.404, 39.915)
      // 初始化地图，设置中心点坐标和地图级别
      map.centerAndZoom(point, 6)
      //开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true)
      map.setMapStyleV2({
        styleId: 'f3c744fe085969831e09be987e77ba27'
      });
      // 保存数据
      // this.myMap = map
      var myGeo = new BMapGL.Geocoder();
      myGeo.getPoint(_this.postAddress, function(point){
        if (point) {
          _this.send_point_lat = point.lat
          _this.send_point_lng = point.lng
          _this.result_point = point
          var send_point = new BMapGL.Point(_this.send_point_lng,_this.send_point_lat);
          _this.arrayList.push(send_point)
          // map.centerAndZoom(point, 16);
          // map.addOverlay(new BMapGL.Marker(point));
        }else{
          alert("您选择地址没有解析到结果!");
        }
      }, "中华人民共和国");
      myGeo.getPoint(_this.get_address.addressDetail, function(point){
        if (point) {
          _this.get_point_lat = point.lat
          _this.get_point_lng = point.lng
          var get_point = new BMapGL.Point(_this.get_point_lng,_this.get_point_lat);
          _this.arrayList.push(get_point)
        }else{
          alert("您选择地址没有解析到结果!");
        }
      }, "中华人民共和国");
      setTimeout(function(){
        function showPoly(pointList){
          for(var c = 0;c < pointList.length;c++){
            var marker = new BMapGL.Marker(pointList[c]);
            map.addOverlay(marker);
          }
          map.centerAndZoom(pointList[0], 6);
          var driving = new BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
          driving.search(pointList[0], pointList[1]);
        }
        showPoly(_this.arrayList)
      },1000)
    })
        .catch((err) => {
          console.log(err)
        })
  },

  methods: {
    // goback(){
    //   this.$router.go(-1);
    // },
    initMap() {
      // 传入密钥获取地图回调。
    },
  }
};
</script>
<style scoped>
.allmap {
  width: 40%;
  height: 100vh;
  position: relative;
  z-index: 1;
}
.van-nav-bar__placeholder{
  height: 20px !important;
}
</style>